<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      @font-face {
        font-family: "AlibabaPuHuiTi";
        src: url("../font/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2"),
          url("../font/AlibabaPuHuiTi-3-55-Regular.woff") format("woff"),
          url("../font/AlibabaPuHuiTi-3-55-Regular.ttf") format("truetype"),
          url("../font/AlibabaPuHuiTi-3-55-Regular.otf") format("opentype"),
          url("../font/AlibabaPuHuiTi-3-55-Regular.eot")
            format("embedded-opentype");
      }
      body {
        margin: 0;
        background-size: cover;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh; /* 使整个页面的高度占满视口 */
        font-family: "AlibabaPuHuiTi", sans-serif;
      }

      #title {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: row;
      }

      #title img {
        width: 100px; /* 根据需要调整图像的大小 */
        margin-bottom: 10px; /* 调整图像和标题之间的间距 */
      }

      h1,
      h2 {
        font-size: 30px;
        padding-bottom: 11px;
        padding-left: 10px;
        color: #ff6a00;
        margin: 0;
      }

      .el-card {
        width: 600px;
        height: 300px;
        margin-top: 20px; /* 调整卡片与标题之间的间距 */
        background-color: rgba(255, 255, 255, 0.3);
      }

      .el-form {
        width: 400px;
        margin: 30px auto;
      }

      .el-button--primary {
        color: #fff;
        background-color: #ff6a00;
        border-color: #ff6a00;
      }

      .el-form-item__label {
        color: white;
      }

      .el-button--primary {
        background-color: #ff6a00;
        border-color: #ff6a00;
      }

      .el-button--primary:hover {
        background-color: #c65200;
        border-color: #c65200;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <video
        style="
          position: fixed;
          bottom: 0;
          width: 100%;
          height: 100%;
          left: 0;
          z-index: -1;
          object-fit: cover;
        "
        src="https://static.alibabagroup.com/static/fb23a195-4822-4688-9809-db1609ae29c9.mp4"
        autoplay
        muted
        loop
      ></video>
      <div id="title">
        <img src="./imgs/alilogo.jpg" alt="logo" style="width: 200px" />
        <h1>阿里巴巴集团企业官网后台管理系统</h1>
      </div>
      <el-card
        style="
          width: 600px;
          height: 300px;
          margin: 0 auto;
          background-color: rgb(255, 255, 255, 0.3);
          border-color: rgb(255, 255, 255, 0.3);
        "
      >
        <el-form style="width: 400px; margin: 30px auto" label-width="60px">
          <el-form-item label="用户名">
            <el-input
              type="text"
              v-model="user.username"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="user.password"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
        </el-form>
      </el-card>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- import axios -->
  <script src="./js/axios.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data() {
        return {
          user: {
            username: "",
            password: "",
          },
        };
      },
      methods: {
        login() {
          //1、发送请求 2、接受返回信息 3、处理返回信息
          axios
            .post("admin/login", v.user)
            .then(function (response) {
              // 处理返回信息
              if (response.data == 1) {
                alert("用户名不存在");
              } else if (response.data == 2) {
                // 在登录成功后，将用户名存储在 localStorage 中
                localStorage.setItem("username", v.user.username);
                location.href = "admin.html";
              } else if (response.data == 3) {
                alert("密码错误");
              } else {
                alert("服务器出现未知错误，请联系管理员查看");
              }
            })
            .catch(function (error) {
              console.error("Network error:", error);
            });
        },
      },
    });
  </script>
</html>
